<template>
  <div class="lin_navbar">
    <div class="lin_navbar_list lin_display_flex">
      <div class="lin_navbar_list_left lin_display_flex_between">
        <Menu
            @click="toggleMenu"
            v-if="isOpenMenu"
            class="lin_navbar_menu"
        />
        <div class='lin_logo'>
          <a>
            <nuxt-link to="/">
              <img src="/%20assets/static/images/logo.png">
            </nuxt-link>
          </a>
        </div>

      </div>
      <div class="lin_navbar_login lin_display_flex_evenly"
           v-show="isOpenLogin"
      >
        <div class="lin_navbar_login_button">
          <el-popconfirm
              class="box-item"
              title="退出登录"
              placement="bottom"
              @cancel="handleCancel"
              @confirm="handleConfirm"
          >
            <template #reference>
              <el-button size="large">star bucket</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
  <DropMenu
      v-model:isOpen="isOpen"
  />
</template>

<script setup lang="ts">
import { useWindowStore } from '~/stores/pinia/useWindowStore';
import Menu from "~/ components/button/Menu.vue";
import DropMenu from "~/ components/DropMenu.vue";
import { useRouter } from 'vue-router';


const windowStore = useWindowStore();
const showNavBarList = ref(false);
const isOpen = ref(false); // 控制菜单的开关
const isOpenMenu = ref(false);
const isOpenLogin = ref(true);
const router = useRouter();



const handleCancel = () => {
  console.log('用户取消退出登录');
};

const handleConfirm = () => {

  router.push('/admin')
  console.log('用户确认退出登录');

};


const navBarDisplayed = async() => {
  const Yes_or_No = windowStore.checkWindowSize()
  showNavBarList.value = !Yes_or_No;
  isOpenMenu.value = Yes_or_No;
  isOpenLogin.value = window.innerWidth > 700;
  if(window.innerWidth >= 970){
    if(isOpen.value){
      isOpen.value = false;
    }
  }

}
const toggleMenu = () => {
  isOpen.value = !isOpen.value; // 切换菜单的显示状态
};
onMounted(() => {
  navBarDisplayed();
  window.addEventListener('resize', navBarDisplayed);
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', navBarDisplayed);
})



</script>

<style scoped lang="scss">

.lin_navbar_list {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgb(223, 222, 222);
  z-index: 1;
  background: white;
}

.lin_navbar_menu {
  padding-right: 30px;
  left: 0;
}

.lin_navbar_list_left {
  position: absolute;
  left: 100px;
}


.lin_flex_options_ul li {
  margin-right: 30px;
}

.lin_flex_options_ul li:last-child,
.lin_navbar_login div:last-child {
  margin-right: 0; /* 去掉最后一个列表项的右间隔 */
}

.lin_navbar_login{
  position: absolute;
  right: 100px;
}

.lin_logo img{
  height: 40px;
  width: 40px;
}

.lin_navbar_login_button button {
  border: none;
  color: black;
  font-weight: 700;
  font-size: 14px;
}
.lin_navbar_login_button button:hover {
  color: gray;
  opacity: 0.7;
}





</style>